<template>
  <div class="form-container">
    <el-form
      ref="registerForm"
      :model="registerUser"
      :rules="registerRules"
      label-width="120px"
      class="register-form"
    >
      <el-form-item class="form-item item-input" label="用户名" prop="name">
        <el-input
          v-model="registerUser.name"
          placeholder="请输入用户名"
        ></el-input>
      </el-form-item>
      <el-form-item class="form-item item-input" label="邮箱" prop="email">
        <el-input
          v-model="registerUser.email"
          placeholder="请输入邮箱"
        ></el-input>
      </el-form-item>
      <el-form-item class="form-item item-input" label="密码" prop="password">
        <el-input
          v-model="registerUser.password"
          type="password"
          placeholder="请输入密码"
        ></el-input>
      </el-form-item>
      <el-form-item class="form-item item-input" label="确认密码" prop="password2">
        <el-input
          v-model="registerUser.password2"
          type="password"
          placeholder="请再次输入密码"
        ></el-input>
      </el-form-item>

      <el-form-item class="form-item item-select" label="选择身份">
        <el-select v-model="registerUser.role" placeholder="请选择身份">
          <el-option label="管理员" value="admin"></el-option>
          <el-option label="用户" value="user"></el-option>
          <el-option label="游客" value="visitor"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item class="form-item item-button">
        <el-button
          @click="handleRegister('registerForm')"
          type="primary"
          class="submit-btn"
          >注册</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>
<script lang="ts">
import { ref, getCurrentInstance } from "vue";

interface RegisterUser {
  name?: string;
  email?: string;
  password?: string;
  password2?: string;
  role?: string;
  [propName: string]: unknown;
}

interface RegisterRules {
  name?: ({
    message: string;
    required: boolean;
    trigger: string;
  } | {
    min: number;
    max: number;
    message: string;
    trigger: string;
  })[];
  email?: {
    type: string;
    message: string;
    required: boolean;
    trigger: string;
  }[];
  password?: ({
    required: boolean;
    message: string;
    trigger: string;
  } | {
    min: number;
    max: number;
    message: string;
    trigger: string;
  })[];
  password2?: ({
    required: boolean;
    message: string;
    trigger: string;

  } | {
    min: number;
    max: number;
    message: string;
    trigger: string;

  } | {
    validator: (rule: RegisterRules, value: string, callback: any) => void;
    trigger: string;
  })[];
  [propName: string]: unknown;
}

export default {
  setup() {
    // @ts-ignore
    const { ctx } = getCurrentInstance();
    const registerUser = ref<RegisterUser | null>({
        name: "",
        email: "",
        password: "",
        password2: "",
        role: ""
    });
    
    const validatePass2 = (rule: RegisterRules, value: string, callback: any) => {
        if (value === "") {
            callback(new Error("请再次输入密码"));
        } else if (value !== registerUser?.value?.password) {
            callback(new Error("两次输入密码不一致!"));
        } else {
            callback();
        }
    };
    const registerRules = ref<RegisterRules>({
        name: [
            {
                message: "用户名不能为空",
                required: true,
                trigger: "blur",
            },
            {
                min: 2,
                max: 30,
                message: "长度在2到30个字符",
                trigger: "blur",
            }
        ],
        email: [
            {
                type: "email",
                message: "邮箱不能为空",
                required: true,
                trigger: "blur"
            }
        ],
        password: [
            {
                required: true,
                message: "密码不能为空",
                trigger: "blur"
            },
            {
                min: 6,
                max: 30,
                message: "密码长度在6到30个字符",
                trigger: "blur"
            }
        ],
        password2: [
            {
                required: true,
                message: "密码不能为空",
                trigger: "blur"
            },
            {
                min: 6,
                max: 30,
                message: "密码长度在6到30个字符",
                trigger: "blur"
            },
            { validator: validatePass2, trigger: "blur" }
        ]
    });

    const handleRegister = () => {
      const ref =ctx.$refs['registerForm'];
      if (ref) {
        ref.validate((valid: boolean) => {
            if (valid) {
            alert("submit!");
            } else {
            console.log("error submit!!");
            return false;
            }
        });
      }
    };

    return { registerUser, registerRules, handleRegister };
  },
};
</script>

<style scoped lang="scss">
    .form-container{
        width: 100%;

        &::v-deep(.register-form) {
            width: 100%;
            margin-top: 20px;
            background-color: #fff;
            padding: 60px 40px 40px 20px;
            border-radius: 5px;
            box-shadow: 0px 5px 10px #cccc;
            .el-form-item {
                &.item-button {
                    .el-button {
                        width: 100%;
                    }
                }
            }
        }
    }
</style>
